Making a Simple Package for Cuis 


This is a tutorial which shows in detail the process of creating a simple package in Cuis Smalltalk and making it 
sharable on GitHub. 


Basic Orientation 


It would be good for you to read through the Cuis documentation on package based code sharing before going 
through this tutorial. 


You can find information at the web site or from within a running Cuis image. 
From the Cuis-Smalltalk-Dev web site: 


e https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev/blob/master/Documentation/CuisAndGitHub.md 
e https://github.com/Cuis-Smalltalk/Cuis-Smalltalk- 
Dev/blob/master/Documentation/CodeManagementlnCuis.md 
Within a running Cuis image, use Cmd-Click (the Command key depends on your Operating System) to get the 
World Menu. Then open the pages from the Help submenu. 


/home/kend/Cuis/Cuis-S malltalk-Dev/Dev.image 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


| 
(from http://jvuletich.org/Cuis /CodeManagementinCuis4.html ) 


Cuis 4 includes new tools and new suggested procedures for managing Smalltalk code. Code that is not part 
of the Cuis Core image itself, like applications, frameworks and libraries, should be stored in Packages. New 
ches, fixes or additions; that could eventually become part of Cuis itself, is not 
4 is therefore automatically stored in Change Sets. 


Let's start with Packages. The Package implementation in Cuis 4 is based on Packagelnfo, the standard way 
to specify packages in Squeak and its derivatives, and used, for example, by Monticello. It uses Package 
names, to specify prefixes for Class and Method categories. Classes and Methods whose categories match 
a Package's prefixes belong in that Package. More details about how Packagelnfo decides what code 
belongs in a package are available at http://wiki.squeak.org/squeak/3329 . 


To install packages (.pck.st files) in Cuis, use the FileList, navigate to the appropriate directory (on disk, or 
in a GitHub repository, etc), select the package file and click on [Install Package]. 


Cuis includes a tool to manage installed Packages. It is at World / Open / Installed Packages. To create a 
new package (instead of installing an existing one from a file), click on [Create Package] This creates a new 
package, and associates with it all the existing code in the image that matches the package name. 


The operations available on installed or newly created packages are: 


We will be following the recipies for developing with packages. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev-spur.image 


Development process for External Packages 


This is the suggested procedure for developing external packages. Usually do this 
every day. 


Start with a standard (i.e. fresh) Cuis image. Never save the image. 
Set up Git repositories for external packages (if not already done) 
Install packages from Git repositories. 

Develop. Modify and/or create packages. 


Save own packages (to Git repositories). 


Git add / commit / push as appropriate. 


Fileout changes that are not part of any package. These are automatically 
captured in numbered changesets, separated from changes to packages. 


Exit the image. Usually without saving. 


The first step in developing a package is to get yourself an account on GitHub 


e https://github.com 


This step is not shown. 


When you have an account, creating a new repository is easy. 


We like easy. We can deal with easy. ;^) 


Creating a GitHub Repository 


The first thing is to think of a good, descriptive-but-not-too-long name. 


The convention for Cuis is to start all repository names with 'Cuis-Smalltalk-'. This allows tools to have a common 
searching convention for finding packages. 


Note that | am creating a repository in Cuis-Smalltalk-Learners. You will want to create a repository within your own 
GitHub account. 


x Your Repositories - Mozilla Firefox o [a] 
©) Learning-Cuis/sam... x / C) Your Repositories x \* 
(€) © © @ GitHub, Inc. (US) | https://github.com/KenDickey?t | C ||C9 search | * 6 ttj = 


Byvideo Online» [JWhidbey/Localy News» [Ej Most Visitedy @ Getting Started [:jCHIP* smalltalk» (jCUIS* » 


O Pull requests Issues Gist A + B - 
Overview Repositories 18 Stars 4 Followers 8 Following 0 
Type: All ~ Language: All ~ EJ 
us 
HereBeDragons Smalltalk *0 
ode which changes base system 
-- NOT package code 


Ken Dickey 


KenDickey Cuis-Smalltalk-Morphic-Misc1 @ Smalltalk *0 
Add a bio 


Basic morph 


several packages 


Edit profile 


Cuis-Smalltalk-Unicode @ Smalltalk *? 


gn Sketch showing dispatch mechanics for Unicode 


(9 Joined on Jan 3, 2013 


https://github.com/new 


Shareable Cuis code by convention uses the MIT open source licence. 


| typically create a default README.md file as well. 


x Create a New Repository - Mozilla Firefox o o 


() Learning-Cuis/Sam... */O Create a New Repo... x \+ 


€) © U A GitHub, Inc. (US) | https://github.com/new e | [c$ search | ADOD A = 


[video Online» §§Whidbey/Localy (Newsy [EjMost Visitedy @ Getting Started §§CHIPY smalltalk» §§cuisy » 


Owner Repository name 
BB kenDickey > / Cuis-Smalitalk-IA-EN-Dictionary Y 


Great repository names are short and memorable. Need inspiration? How about automatic-octo-fiesta. 


Description (optional) 
Interlingua <--> English lookup 


oH Public 


Anyone can see this repository. You choose who can commit. 


of} Private 


You choose who can see and commit to this repository. 


y] Initialize this repository with a README 
This will let you immediately clone the repository to your computer. Skip this step if you're importing an existing repository. 


Add .gitignore: None + Add a icense: MIT License + 


Create repository 


OK. Now that | have a repository set up, | can clone it and add files. 


KenDickey/Cuis-Smalltalk-IA-EN-Dictionary: Interlingua <--> English lookup - Mozilla Firefox 
©) Learning-Cuis/Sam... x / €) KenDickey/Cuis-Sm... x 


€) © U A GitHub, Inc. (US) | https;//github.com/KenDickey/C | Œ | |C@Search | xia +f 


(video Online» [JWhidbey/Localy News» [Most Visitedy @Getting Started §§CHIPY smalltalk» (CUIS* » 


o This repository Pullrequests Issues Gist A t g&B ~ 
L KenDickey / Cuis-Smalltalk-IA-EN-Dictionary O Unwath - 1 — Str 0 YFork 0 
«» Code D Issues 0 1 Pull requests 0 J'i Projects 0 3 Wiki 4~ Pulse ilı Graphs Settings 


Interlingua <--> English lookup — Edit 


tp 1 commit pp 1 branch © 0 releases 22 1 contributor 


Branch: master ~ New pull request Create new file Upload files Find file 

ED kenDickey Initial commit Latest commit e: 

B) LICENSE Initial commit just now 
B README.md Initial commit just now 
Es] README.md 


| am a Linux user, so | use the command line. 


Being lazy, | "Copy" the github name from the web page. 


KenDickey/Cuis-Smalltalk-IA-EN-Dictionary: Interlingua <--> English lookup - Mozilla Firefox Éi 
©) Learning-Cuis/Sam... x / C) KenDickey/Cuis-Sm... x 


( é ) © O A GitHub, Inc. (US) | https://github.com/KenDickey/C | @ ||C@Search wii Y yA = 


(video Online» [JWhidbey/Localy (Newsy [Most Visitedy @Getting Started [:jCHIPv Smalltalk» §§cuisy » 


o This repository arch Pull requests Issues Gist A t B- 


[2 KenDickey / Cuis-Smalltalk-IA-EN-Dictionary GOUnwach- | 14| Sur |0| | YFork 0 


<> Code @ Issues 0 1 Pull requests 0 (| Projects 0 53 Wiki 4» Pulse lj Graphs 1? Settings 


Interlingua <--> English lookup — Edit 


1 commit 1 branch © 0 releases 1 contributor 
(p v o 


Branch: master ~ New pull request Create new file Upload files Find file 


BB kenDickey Initial commit 


Clone with HTTPS (5 Use SSH 
x A | Use Git or checkout with SVN using the web URL. 
LICENSE Initial commit | f 
Ej README.md Initial commit 
Es] README.md 
e LJ ~~ ate .. sa ma: rm” ae 


Terminal 


File Edit View Terminal Tabs Help 


Add a new file to a Git repository 


For this tutorial | wanted an example where a small amount of code gives useful tool. 


| have been thinking of rewriting one of my earliest Cuis projects which | think fits this goal: an Interlingua<->English 
word lookup. 


This is how this current lookup window appears: 


Enter Text: facer| 


Interlingua Contains Interlingua Starts - 

. English Contains English Starts | 
benefacer <---> to do good, be beneficent a 
calefacer <---> to warm, heat | 
continuar a facer un cosa «---» to continue to do something 
contrafacer <---> to counterfeit, imitate, mimic 
determinar se a facer un cosa <---> to determine on doing or to do: 
disfacer <---> to undo, unfasten, destroy, defeat 
disfacer se de <---> to get rid of 
disposite a facer un cosa <---> disposed to do something 
esser in stato de facer un cosa <---> to be in a position to do somet 
esser super le puncto de facer un cosa <---> to be on the point of d 
facer <---> to do, make 
facer abortar <---> to abort, cause an abortion 
facer abstraction de <---> to disregard, leave out of consideration 
facer allusion a <---> to allude to 
facer allusion al <---> to allude to 
facer almosna <---> to give alms 
facer antecamera <---> to wait in the antichamber 
facer aqua <---> to leak 


The way this works is 


e Enter a word, or part of a word. 
* Either press Enter/Carriage Return or click on one of the four buttons. 


Pressing enter (carriage return) is the same as clicking on button labeled ‘Interlingua Contains’. 
Having decided this, the first thing | did was add the Interlingua-» English dictionary to the local Git repository. 


e [1] copy the file into the local repository 

e [2] "git add" to make the repository aware of the file 

* [3] "git commit" to declare the file as ready for update 

* [4] "git push" to actually update the repository on GitHub from the local version. 


Here is what this looks like in a Linux shell: 


File Edit View Terminal Tabs Help 


~>> cd Cuis/ 


remote: Counting objects: 4, done. 
remote: Compressing objects: 


Unpacking objects: 100% (4/4), done. 
Checking connectivity... done. 


~/Cuis/Cuis-Smalltalk-IA-EN-Dictionary>> 
LICENSE README.md 

-/Cuis/Cuis-Smalltalk-IA-EN-Dictionary»» 
-/Cuis/Cuis-Smalltalk-IA-EN-Dictionary»» 


-/Cuis»» git clone https://github.com/KenDickey/Cuis-Smalltalk-IA-EN-Dictionary.git 
Cloning into 'Cuis-Smalltalk-IA-EN-Dictionary'... 


100% (4/4), done. 
remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0 


~/Cuis>> cd Cuis-Smalltalk-IA-EN-Dictionary/ 


ls 


p ../Cuis-Smalltalk-SamplePkg/iedict.txt . 
git add iedict.txt 


-/Cuis/Cuis-Smalltalk-IA-EN-Dictionary»» 
[master 3065a7e] Dict Data 
1 file changed, 30812 insertions(+) 
create mode 100644 iedict.txt 
~/Cuis/Cuis-Smalltalk-IA-EN-Dictionary>> 


git commit -m "Dict Data" iedict.txt 


git push I 


File Edit View Terminal Tabs Help 


*|-»» cd Cuis/ 
-/Cuis»» git clone https://github.com/KenDickey/Cuis-Smalltalk-IA-EN-Dictionary.git 
Cloning into 'Cuis-Smalltalk-IA-EN-Dictionary'... 
remote: Counting objects: 4, done. 
remote: Compressing objects: 100% (4/4), done. 
remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0 
Unpacking objects: 100% (4/4), done. 
Checking connectivity... done. 
~/Cuis>> cd Cuis- Smalltalk- IA-EN-Dictionary/ 
~/Cuis/Cuis-Smalltalk-IA-EN-Dictionary>> ls 
LICENSE README.md 
~/Cuis/Cuis-Smalltalk-IA-EN-Dictionary>> 
~/Cuis/Cuis-Smalltalk-IA-EN-Dictionary>> 
-/Cuis/Cuis-Smalltalk-IA-EN-Dictionary»» 
[master 3065a7e] Dict Data 
1 file changed, 30812 insertions(+) 
create mode 100644 iedict.txt 
-/Cuis/Cuis-Smalltalk-IA-EN-Dictionary»» git push 
Username for 'https://github.com': KenDickey 
Password for 'https://KenDickey@github.com': 
Counting objects: 3, done. 
Compressing objects: 100% (3/3), done. 
Writing objects: 100% (3/3), 305.89 KiB | O bytes/s, done. 
Total 3 (delta 0), reused 0 (delta 0) 
To https: //github.com/KenDickey/Cuis-Smalltalk-IA-EN-Dictionary.git 
e2e442a..3065a7e master -> master 
~/Cuis/Cuis-Smalltalk-IA-EN-Dictionary>> fj Í 
= 


cp ../Cuis-Smalltalk-SamplePkg/iedict.txt . 
git add iedict.txt 
git commit -m "Dict Data" iedict.txt 


| can check this by refreshing the repository web page. 


KenDickey/Cuis-Smalltalk-IA-EN-Dictionary: Interlingua <--> English lookup - Mozilla Firefox 
C) Learning-Cuis/Sam... x/0 KenDickey/Cuis-Sm... x \ + 


(€) 


(video Online» [JWhidbey/Localy (Newsy [fjMost Visitedy @Getting Started [:jCHIPv [Smalltalk+ §§cuisy » 


O © A GitHub, Inc. (US) | https://github.com/KenDickey/C e | [c$ Search | * BOY zc 


o This repository Pull requests Issues Gist a+ B- 
L KenDickey / Cuis-Smalltalk-IA-EN-Dictionary O Unwath - 1 wWSter 0 YFork 0 
<> Code D Issues 0 i) Pull requests 0 [ill Projects 0 Wiki ^» Pulse ilı Graphs © Settings 


Interlingua <-> English lookup — Edit 


(p 2 commits jp 1 branch © O releases 42 1 contributor he MIT 
Branch: master ~ New pull request Create new file Upload files Find file 
[e] KenDickey Dict Data Latest commit 3965a7e 2 minutes ago 
B LICENSE Initial commit 6 minutes ago 
Ej README.md Initial commit 6 minutes ago 
B iedict.txt h Dict Data 2 minutes ago 
A 
README.md 


Creating a Cuis Category 


OK. Now for the fun part: some Smalltalk code! 
First we need a code Browser. 
Command-Click on the World background to get a World Menu. 


World-» Open..-» Browser 


Jhome/kend/Cuis/Cuis 


The upper left pane in the Browser lists class categories. 


We want to add a new class category. Cmd-Click on this pane to gets it's context menu and select ‘add item..' 


Kernel-Objects 
Kernel-Classes 


Now we can create a category 'IA-EN-Dictionary'. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


Kernel-Objects 
Kernel-Classes 
Kernel-Magnitudes 
Kernel-Numbers 
Kernel-Text 
Kernel-Chronology 
NErnel- Me 


As you might suspect, the international language code for English is 'EN' and the code for Interlingua is ‘IA’. 


Adding a Class 


We will be creating a specialized SystemWindow with ¡ts associated data model. 


This is a common pattern. If you open a HierarchyBrowser on 'SystemWindow' you will see this a lot. (Not shown 
here; you can look later). 


Since our dictionary will work in both directions, Interlingua->English and English->Interlingua, we will NOT be using 
a Smalltalk dictionary here but will inherit directly from Object. 


The class will be called IEDict . 


We add a Class Variable, DictData , to hold our (what else?) dictionary data. Note that class variable names are by 
convention capitalized. This helps distinguish then from instance variables. 


Access to a class variable is shared by all instances of that class. An instance variable is unique to each instance of the 
class. 


It is a bit subtle, but there is a thin red border around the lower pane where we typed inthe IEDict definition 
fields. This means that we have started an edit, but not yet saved it. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


x=, 


Tools-ReferenceFind 
Tools-Autocompletio 
Tools-Syntax Highligl 
Tools-Code Differ 
Tools-Menus 

p anar o 


Object subclass: #lEDict 
instanceVariableNames: " 
classVariableNames: 'DictData' k 
poolDictionaries: " 
category: 'IA-EN-Dictionary* 


The code you are looking at is just code. It is text which will be compiled and the compiled code then invoked to 
create a new Smalltalk class. 


Cmd-click on this pane to see the context menu. We can select 'Accept (s)'. 


If we did not wish to use the menu, we could just type Cmd-s (hold down the command key and press 's'). This is why 
the '(s)' in ‘Accept (s). 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


300€ 


Tools-ReferenceFind 
Tools-Autocompletio 
Tools-Syntax Highligl 
Tools-Code Differ 
Tools-Menus 


Object subclass: #1EDict 
instanceVariableName 
classVariableNames: 'DictData' 
poolDictionaries: " 
category: 'IA-EN-Dictionary* 


Congratulations! You have created a new Class! 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


SES 


Tools-Referencerind ^] IEDict- 
Tools-Autocompletio 
Tools-Syntax Highligl 
Tools-Code Differ 
Tools-Menus 


Class definition for IEDic tance methods. 0 class methods. 0 total lines of code. 


Object subclass: &IEDict 
instanceVariableNames: 
classVariableNames: 'DictData" 
poolDictionaries: " 
category: 'lA-EN-Dictionary" 


THIS CLASS HAS NO COMMENT! 


Add a Class Comment 


Noting the red 'THIS CLASS HAS NO COMMENT", now is a good time to add some description of the new class. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


Tools-ReferenceFind 
Tools-Autocompletio 
Tools-Syntax Highligl 
Tools-Code Differ 
Tools-Menus 


Class definition for IEDict. O instance methods. O class methods. 0 total lines of code. 


Object subclass: #1EDict 
instanceVariableNames: " 
classVariableNames: 'DictData' 
poolDictionaries: " 
category: 'IA-EN-Dictionary* 


| embody a specialized Dictionary of Interlingua->English. 


Class intention 
Lam not like a regular dictionary because | maintain my definitions in an array of two element 
arrays #(‘interlingua definition’ 'English definition’). All definitions which contain a search match 
are returned. 


To (s)ave the class comment, | type Cmd-s (or use the context menu selection Accept). 
Creating a Package and adding it to GitHub. 

OK. We have an IEDict class and are about to start adding Smalltalk code. 

But this is a perfect time to pause and save our work to GitHub. 

The first thing to do is to create a Package which can be added to our GitHub repository. 


| open an Installed Packages browser from the World Menu -> Open.. submenu. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


Class intention 
| am not like a regular 
arrays #(‘interlingua de 
are returned. 


Clicking on the new button, | fill in exactly the same name as | gave the system category: 'IA-EN-Dictionary’. 
Copy/Paste from the class browser would work here as well. | Accept the name. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


Tools-ReferenceFind " 
Tools-Autocompletio Package Name 
Tools-Syntax Highligl 

Tools-Code Differ 

Tools-Menus 

Class definition for IEDict. 


Object subclass: #IEDic 
instanceVariableNames]| 


classVariableNames: 'D 
poolDictionaries: " Name for new package? 


Dictior IA-EN-Dictionary 


—_— 
EN rl 


are returned. 


Now I just fill in the package comment and click the 'save' button. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


3) C62 @2 


Tools-ReferenceFind 
Tools-Autocompletio 
Tools-Syntax Highligl 
Tools-Code Differ 
Tools-Menus - 


Class definition for IEDict. 


Object subclass: #IEDic 


instanceVariableNames} package: IA-EN-Dictionary -- -- Number of system categories 1. -- Number of 
classVariableNames: ‘DJ classes: 1. Number of extension methods: 0. Total number of methods: 0. Total lines 


Pategory: MN =| of code: 0 (0.00 per method). 
Enter a word in English or Interlingua and find the corresponding Interlingua or English 


| embody a specialized Did hae 


Class intention 
Lam not like a regular 
arrays *('interlingua de 
are returned. 


| can open a File Browser to check that the package was created. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


- (2016/10/15 2. 1,749420) Dev 2053.changes 
i ,749, ev- .changes 

rM 12:04:31 16,334,208)  Dev.image 
12:04:31 16,334,208) Dev-2953.image 
11:51:14 11,424,659)  Cuis4.2-2923-spur.changes 
11:50:29 11,869,791) Dev-2943.changes 
15:34:25 21,444,400)  Dev-2943.image 
15:34:14 12,369,728)  IEDict.image 
15:34:14 12.369.728) IA-FN-2923-snur.imaae 


"From Cuis 4.2 of 25 July 2013 [latest update: #2953] on 19 October 2016 at 3:18:08 pm" 
"Description Please enter a description for this package" 
Iprovides: 'IA-EN-Dictionary' 1 0! 
IclassDefinition: #IEDict category: #'lA-EN-Dictionary'! 
Object subclass: #IEDict 

instanceVariableNames: “ 

classVariableNames: 'DictData' 

poolDictionaries: 

category: 'lA-EN-Dictionary"! 
IclassDefinition: 'IEDict class' category: #'IA-EN-Dictionary'! 
IEDict class 

instanceVariableNames: “! 


| find a file 'IA-EN-Dictionary.pck.st' was created in the directory where the Cuis image file was found 'Cuis-Smalltalk- 
Dev". 


This package text file contains the code and some meta-data about the code and looks fine. However, the package 
file is not in the 'Cuis-Smalltalk-IA-EN-Dictionary' directory. 


Gotta fix this! 


In my case, | get a Linux command shell, move the file to the Cuis-Smalltalk-IA-EN-Dictionary directory, "git add", "git 


commit", "git push". 


Terminal 


Our Cuis-Smalltalk-IA-EN-Dictionary repository on GitHub has now been updated to contain our package. 


Anyone with access to this directory web page on GutHub can now "git clone" the directory and share our code, after 
which they can "git pull" to get our updates. 


All that remains to do is quit out of Cuis WITHOUT saving our changes. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


bin tARM EEE 11 — Dev-2953.changes 
rli ev- .changes 
ala 16,334,208)  Dev.image 
j is- 4 16,334,208) Dev-2953.image 
persia dete : 11,424,659)  Cuis4.2-2923-spur.changes 
7 Cuis- z 11,869,791) Dev-2943.changes 
21,444,400) Dev-2943.image 
15:34:14 12,369,728) lEDict.image 
15:34:14 12.369.728) __IA-FN-2973-snur.imane 


'Description Please enter a description for this package"! 
Iprovides: 'IA-EN-Dictionary' 1 0! 
IclassDefinition: #IEDict category: #'IA-EN-Dictionary" 
Object subclass: sHEDict 

instanceVariableNames: " 

classVariableNames: 'DictData' 

poolDictionaries: " 

category: ‘IA-EN-Dictionary'! 
IclassDefinition: ‘IEDict class' category: #'IA-EN-Dictionary'! 
IEDict class 

instanceVariableNames: “! 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


RUS Fly 


Tools-ReferenceFind 
Tá 


€ 6 


5 11,749,120)  Dev-2953.changes 
rM AM 16,334,208) Dev.image 
E £ 16,334,208 Dev-2953.image 
Hire eee eee 11,424,659) — Cuis4.2-2923-spur.changes 
T 3 ”] 11,869,791) Dev-2943.changes 
21,444,400)  Dev-2943.image 
12,369,728)  IEDict.image 
12.369.728) IA-FN-2923-snur.imaae 


Object subclass: #IEDict 

instanceVariableNames: " 

classVariableNames: 'DictData' 

poolDictionaries: " 

category: ‘IA-EN-Dictionary’! 
IclassDefinition: ‘IEDict class' category: &'IA-EN-Dictionary"! 
IEDict class 

instanceVariableNames: "! 


This is OK as we are not changing the base Cuise image. All our work is saved in GitHub. 


Part 2 


This tutorial is continued in 


e https;//github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/SamplePackage2.md 


Making a Simple Package for Cuis -- Part 2 


This is a continuation of 


e https://github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/SamplePackage1.md 
Package loading 
You should know how Cuis finds packages to load. 


First, Cuis looks in the folder the image is running from, then in its subfolders/subdirectories 'Packages' and 
'CompatibilityPackages'. Then it looks in the parent directory of 'Cuis-Smalltalk-Dev' for directories with names 


starting 'Cuis-Smalltalk-'. 


So the best thing is for all directories/folders named 'Cuis-Smalltalk-*' to be in the same common directory. If this 
directory is named 'Cuis' then there should be a 'Cuis/Cuis-Smalltalk-Dev' and a 'Cuis/Cuis-Smalltalk-IA-EN- 


Dictionary’. If this is not the case, you must make it so. 


To avoid confusion, make sure your IA-EN-Dictionary.pck.st file is in folder/directory 'Cuis-Smalltalk-IA-EN- 


Dictionary' and that there is nota IA-EN-Dictionary.pck.st in Cuis-Smalltalk-Dev'. 


Also, if you have a 'Cuis-Smalltalk-SamplePkg' directory, you might rename it to something like 'SamplePackage". 
This will ensure that there is only one IA-EN-Dictionary feature to find when Cuis looks for a package with this 


feature. 


Feature require: £'IA-EN-Dictionary' 


We start with a "fresh" Cuis development image. 


World menu -» Open -» Workspace 
Feature require: #'IA-EN-Dictionary' 


Note that Cuis does syntax hilighting as you type. Very useful, this. 


e Feature is the name of a class 
e require: isa message selector on the Feature class 


e #'IA-EN-Dictionary' isa symbol 


You also have word completion. If you start typing a word, e.g. 'Fea', then type TAB, you get a context based 
temporary select list of possible completions. 


You can ignore these or select one of them and press enter/CR to complete the word you want. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


In a Workspace you can select a line of code and either Cmd-click for the context menu and select Dolt or press 


Cmd-d to compile and run the code. 


If the package loads, skip this paragraph and go to the next one. Otherwise, make sure all words are spelled properly 
and try Dolt again. If there is still a problem, please ask for help on the Cuis mailing list http://cuis- 
smalltalk.org/mailman/listinfo/cuis-dev_cuis-smalltalk.org, 


After the package has been loaded, you should be able to open a code browser, scroll to and select the category and 
the IEDict class. You can also move the mouse to the class category pane of the code browser, Cmd-click to get the 
context menu, select Find (or just Cmd-f) type 'IEDict' and you should get to the class code. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


Tools-ReferenceFind~ Y ee | -- all -- 
Tools-Autocompletio no messages 
Tools-Syntax Highligl 

Tools-Code Differ 


Class definition > C 


Object subclas 
instanceVari 


poolDictiona 
category: '1A-* 


definition’). All definitions which contain a search match 


Initializing the IEDict Class 


In the Class pane, under 'IEDict' there are three buttons labled ‘instance’, '?', and ‘class’. Click on ‘class’. 


e/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


Tools-Autocompletio no messages 
Tools-Syntax Highligl 
Tools-Code Differ 


stance methods. 0 class methods. 0 total lines of code. 


IEDict class — 
instanceVariableNames: " 


| embody a specialized Dictionary of Interlingua->English. 


Class intention 
Lam not like a regular dictionary because | maintain my definitions in an array of two element 
arrays #(‘interlingua definition’ ‘English definition’). All definitions which contain a search match 
are returned. 


The difference between Class and Instance is that instance methods operate on individual objects which are instances 
of a class. Class methods operate on the class code shared by all instances. We'll get into what this means in a bit 


more detail below. 


To keep things organized, the class browser groups methods into categories. We will be adding code which does 
class initialization so we first add this category. 


Cmd-click on the method category pane to get its context menu and add a new method category. 
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Tools-Syntax Highligl 
Tools-Code Differ (E fileout 


Tools-Menus s 
$i reorganize 
A| alphabetize 


stance methods. 0 class 1 _ remove empty, Categories 
[3 categorize all uncategorized 


IEDict class 
instanceVariableNames: " 


| embody a specialized Dictionary of Interlingua->English. 


Class intention 
Lam not like a regular dictionary because | maintain my definitions in an array of two element 
arrays #(‘interlingua definition’ ‘English definition’). All definitions which contain a search match 
are returned. 
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4 Tools-ReferenceFind^ -- all -- 
Tools-Autocompletio no messages 
Tools-Syntax Highligl 
Tools-Code Differ 
Tools-Menus 


4) Laps T 

Class definition for IEDict class. O instance methods. 0 class methods. — Instance creation 
object serialization 
package suppor’ t 
windowColor 
accessing 
accessing class hierarchy 
class name 

© class variables 


= = : : copying 
| embody a specialized Dictionary of Interlingua->English. fileln/Out 


IEDict class 
instanceVariableNames: " 


Class intention initialization 
Lam not like a regular dictionary because | maintain my definitions i instance variables 
arrays #(‘interlingua definition’ ‘English definition’). All definitions w DEELER t 
are returned. P À 
private 
release 
subclass creation 


Select the ‘class initialization’ category to get a method template. 


Note the syntax hilighting. The method selector is in black, comments are in green, temporaries are in grey, unknown 
words in red. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


Tools-ReferenceFind 
Tools-Autocompletio 
Tools-Syntax Highligl 
Tools-Code Differ 


Reading the Dict Data 


The first thing we need to look up words in a dictionary is, of course, the dictionary. Please open a File List browser 
and navigate to 'iedict.txt' to see what this text file looks like. (Cmd-click on World; World->Open->File List). 
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»- Cuis-Smalltalk-Babyste 

»- Cuis-Smalltalk-Colorec |( 2016/10/19 14:56:59 

»- Cuis-Smalltalk-Dev 4(2016/10/19 14:56:59 1,067) LICENSE 
»- Cuis-Smalltalk-la-En 

»- Cuis-Smalltalk-Morphic 

»- Cuis-Smalltalk-Named¢ 

ir 


molle Nent Acn 


+ IEDICT - 1 November 2012 - Paul Denisowski (paul@denisowski.org) 
a:to, at, for 

a alcun momento futur : at some point in the future 
a alte voce : at the top of one's voice 

a altere tempores : at other times 

a basso : down, downward 

a basso le traitores! : down with the traitors! 

a bon mercato at : a low rate, cheap(ly) 

a bordo : on board (of), aboard 

a bordo de : on board (of), aboard 

a bucca aperte : with an open mouth 

a cappella : a cappella 

a causa de : because of, owning to 

a causa del calor : Because of the heat 


There is a comment line which indicates the original source of the file, then lines like 


* interlingua parolas : english words 


Since we want a bidirectional lookup, let's save the data as an array of pairs. 


As we only need to read the file once into memory and can share the data, an IEDict class variable is a good home 
for the data. 


Here is one way of doing this. 


initialize 


"Read in my data" 
IEDict initialize. 


| curIndex aLine | 


DictData := Array new: 30811. "We know the exact size (wc -l iedict.txt) less 1" 


(self package asFileName asFileEntry parent // 'iedict.txt') readStreamDo: [ 
:fileStream | 

fileStream nextLine. "Skip initial comment line" 
curIndex :- 1. 
aLine := fileStream nextLine. 
[aLine isNil] whileFalse: [ 

DictData at: curIndex 

put: ((aLine findBetweenSubStrs: ':') 
collect: [:str| str withBlanksTrimmed]). 
aLine := fileStream nextLine. 


curIndex := 1 + curIndex. 
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initialize 
"Read my data" 
IEDict initialize. 
| currindex aLine | 
DictData := Array new: 30811. "We know the exact size via (we -l iedict.txt) less 1" 


(self package asFileName asFileEntry parent // 'iedict.txt' readStreamDo: [ :fileStream | 

fileStream nextLine. "Skip initial comment line" 

currindex := 1. 

aLine := fileStream nextLine. 

[ aLine isNil ] whileFalse: [ 
DictData at: currindex put: ((aLine findBetweenSubStrs: ':') collect: [ :str | str withBlanks Trimmed ]). 
aLine := fileStream nextLine. 
currindex := currindex + 1. 


When | Accept this, | am adding code for the first time since the image started, so the code browser asks who | am. 
This is so that my initials get placed into the code's meta-data. 


If you are unknown to the code browser, you may be asked to add your initials. Please do so! 


There isa versions button in the code browser which lets you see previous versions of the current method. You 
can select a previous version and revert to it if you need to back off a change. 


The versions show who is the author of each version. You know who to ask for help if it is not you! 
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ze 
"Read my data" 


IEDict initialize. 


| currindex aLine | 
DictData := Array new: 30811 W 


(self package asFileName sr Dare "K 

fileStream nextLine. "Skip initial comment line" ae 

currindex := 1. 

aLine := fileStream nextLine. 

[ aLine isNil ] whileFalse: [ 
DictData at: currindex put: ((aLine findBetweenSubStrs: ':') collect: [ :str | str withBlanksTrimmed ]). 
aLine := fileStream nextLine. 
currindex := currindex + 1. 

] 


The text file 'iedict.txt' is read from IEDict's package file name directory. (Cuis' FileEntry differs from Squeak's 
DirectoryEntry by the way. We think it is simpler to use.) 


The comment line is skipped and each line is read in as a String which is split on the colon into two substrings which 
are stored sequentially in an Array which is available in IEDict's DictData class variable. 


Now a class' initialize method is invoked when a class is filed-in/loaded. Since we have already created the 


class IEDict we need to invoke IEDict>>initialize ourselves. 


Class initialization 


You may have noticed the comment 


IEDict initialize. 


One can select any text in a code browser window and Dolt (Cmd-d). When | am changing method code and may 
want to invoke the method again, | just add the invocation code as a comment so that | can Dolt without having to 
open a Workspace. 


Did | mention that | like to make things easy for myself? 
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initialize 
"Read my data" 


lEvictinialze  @ Doit y 
| currindex aLine | Bree ; 
DictData := Arra © Anspectit() -= xactsize via (wc -l iedicttxt) less 1" 
BE O n | 
(self package asFil 5 Entry parent // ~fict.txt’) readStreamDo: [ :fileStream | 
fileStream next — — 
currindex := 1. 
aLine := fileStre £ 
[ aLine isNil ] w = > | 
DictData ¿ ; E weenSubStrs: ':') collect: [ :str | str withBlanks Trimmed ]). 


We Dolt and.. 
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CodePackage(Object)>>doesNotUnderstand: #asFileName 
IEDict class>>initialize 

IEDict class>>Dolt k 
Compiler>>evaluate:in:to:notifying:ifFail:logged: 

[] in SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 
BlockClosure>>on:do: 
SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 


SmalltalkEditor>>dolt 
MenultemMorph>>invokeWithEvent: aS 


MenultemMorph>>mouseButton1Up:localPosition: 
MenultemMorph(Morph)>>processMouseUp:localPosition: 
MouseButtonEvent>>sentTo:localPosition: 


en ee ti 


MouseButtonEvent>>dispatchWith:localPosition: 
MenultemMorph(Morph)>>dispatchEvent:localPosition: 
[] in MouseButtonEvent(MorphicEvent)>>dispatchWith:localPosition: 


DictData := Array new: 30811. "We know the exact size via (wc -l iedict.txt) less 1" 


(self package asFileName asFileEntry parent // 'iedict.txt' readStreamDo: [ :fileStream | 

filestream nextLine. "Skip initial comment line" 

currindex := 1. 

aLine := fileStream nextLine. 

[ aLíne isNil ] whileFalse: [ 
DictData at: currindex put: ((aLine findBetweenSubStrs: ':') collect: [ :str | str withBlanks Trimmed ]). 
aLine := fileStream nextLine. 

: currindex := currindex + 1. 


Oops! 
Well, | guess we are not perfect. (You already knew that? ;^) 


Let's look at the stack with the debugger to see where we went wrong. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev.image 


IEDict class>>Dolt 
Compiler>>evaluate:in:to:notifying:ifFail:logged: 

[ in SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 
BlockClosure>>on:do: 
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KenD 10/19/2016 15:50:36 ° class initialization ° 112 implementors ° 70 senders ° 2 Closures: some do write (and 
maybe some do read) outer temps; none does “return; none does use self ° in no base system change set ° in 


IEDict initialize. 


| currindex aLine | 
DictData := Array new: 30811. "We know the exact size via (wc -l iedict.txt) less 1" 


(self package ASFIlENAME asFileEntry parent // ‘iedict.txt') readStreamDo: [ :fileStream | 
fileStream nextLine. “Skip initial comment line" 


aLine := fileStream nextLine. 
currindex := currindex + 1. 


Ah. What happened is this. Instead of cut+paste, | typed in the code. When I did this, | typed asFileName rather 
than fullFileName . 


Fortunately, this is Smalltalk so is easy to fix. 
| just 


e edit the code in place 

e save (Accept) it 

e click the Restart button to back up the computation to the start of this stack frame (the start of this method) 
e click the Proceed button to continue from here 


We fix things and continue without unwinding the stack! 8^) 
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BlockClosure>>on:do: 


SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 
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IEDict initialize. 


| currindex aLine | aL Medea e 
DictData := Array new: 30811. "We know the exact size via (we | 


stack top == REN 
all temp v |_| Method 


= fileStream nextLine. 
currindex := currindex + 1. 
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Compiler>>evaluate:in:to:notif ying:ifFail:logged: 

[] in SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 
BlockClosure>>on:do: 
SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 
SmalltalkEditor>>dolt 
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IEDict initialize. 


| currindex aLine | 
DictData := Array new: 30811. "We know the exact size via (wc -l iedict.txt) less 1" 


(self package fullFileName asFileEntry parent // ‘iedict.txt') readStreamDo: [ :fileStream | 
fileStream nextLine. "Skip initial comment line" 


thisContext 
stack top 

all temp vars 
currindex 
aLine 
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class>: 
IEDict class>>Dolt 
Compiler>>evaluate:in:to:notifying:ifFail:logged: 
[] in SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 
BlockClosure>>on:do: 
SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 
SmalltalkEditor>>dolt 


alization ° 112 implementors ° 70 senders ° 2 Closures: some do write (and 
none does “return; none does use self ? in no base system change set ° i 


IEDict initialize. 


| currindex aLine | c oe 
DictData := Array new: 30811. "We know the exact size via (we -l iedicttxt) less 1" 


(self package fullFileName asFileEntry parent // ‘iedict.txt') readStreamDo: [ :fileStream | 


Well, without a visible change it is hard to see that IEDict>>initialize succeeded. could open an object 


explorer on the IEDict class object, but since we need lookup methods in any case, why not just write them and use 
them to be sure we read in the dictionary? 


Did | mention | was lazy? 


Lookup 


We create a lookup method category in the IEDict class and add four methods. 
For lookup we use the String»»match: method. This does "regular expression" matching. 


These methods look alike with minor variations and are easy. Did | mention that | like easy? 


interlinguaContains: aString 


"Answer all definition pairs which contain aString looking in the Interlingua 
side" 


| matchStr | 
matchstr ie ('** | aString y Tm jy. « 


^DictData select: [ :pairArray | matchStr match: (pairArray at: 1) ] 
interlinguaStarts: aString 
"Answer all definition pairs which starts with aString looking in the 


Interlingua side" 


| matchStr | 


matchStr := aString , '*' . 


“DictData select: [ :pairArray | matchStr match: (pairArray at: 1) ] 


englishContains: aString 


"Answer all definition pairs which contain aString looking in the English side" 


| matchStr | 
matchStr := ('*' , aString p '*' ) 
“DictData select: [ :pairArray | matchStr match: (pairArray at: 2) ] 


englishStarts: aString 


"Answer all definition pairs which starts with aString looking in the English 


side" 
| matchStr | 
matchStr := aString , '*' 
“DictData select: [ :pairArray | matchStr match: (pairArray at: 2) ] 


Quicklook Testing in a Workspace 
IEDict englishStarts: 'core'. 
Cmd-p (print) will show the result in a Workspace. 
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KenD 10/19/2016 16:06:16 ° lookup ° 1 implementor ° 0 senders ° 1 Closure: does read * ug it 
ananc.: dao DO o codos nuo o ^ 9 in na h e 7 Om hanan ot ina O00 |S EL Diigtsanm a A, 


englishStarts: aString 
"Answer all definition pairs which contain aString looking in the Interlingua side" 


| matchStr | 
matchStr := (aString ,'*'). 


tDictData select: [ :pairArray | matchStr match: (pairArray at: 2) ] 


You can make up tests for the other methods yourself. 


Hey, you can't make me do all the work. Did | tell you | was lazy? 


Wash, rinse, repeat 


Now is a good time to save our work. (The power goes out here in winter in high winds, so | save my work 
frequently). 


We need to 


e Save the Package 
e "git commit" 
e "git push" 


You remember how to open the package browser and "save", right? 


Here is the last time | will bore you with a non-Smalltalk screen shot 


Terminal 


IEDictWindow 


OK. Now to make a window to show our stuff. 

How do we do this? 

Well, there is a lot of good code in SystemWindow that we can reuse just by subclassing. (Did | tell you | was lazy?) 
An IEDictWindow needs to keep track of two things: the text query and the result. 


These will be Morphs, graphical screen objects. 
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Class definition for IEDictWindow. 0 instance methods. 0 class methods. 0 total lines of code. 


SystemWindow subclass: #IEDictWindow 
instanceVariableNames: 'entry TextMorph resultMorph' 
classVariableNames: " 
poolDictionaries: " 
category: 'IA-EN-Dictionary' 


GUI for Interlingua <-> English lookup 


IEDictWindow open 


Opening a IEDictWindow (a new instance) 


We want to open a new IEDictWindow by asking its class to make one. 


The first step is to add a method category to the class side 


Tools-Code Differ |E [ 
Tools-Menus p 


Feature A FES F 
lEDict en GUI for Interlingua English lookup 


IEDictWindow open 


IEDictWindow class 
instanceVariableNames: " ] 


Now we add the code to create an instance 
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IEDictWindow class>>open uses the inherited method SystemWindow class>>open:label: 


Let's take a brief look at this. Select the text which contains open:*label: and Cmd-m (iMplementors). 
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Closures ° in no base system change set ? in package IA-EN-Dictionary ° 


i 'Interlingua <--> English' 


Implementors shows just one implementor: SystemWindow. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev-spur.image 


sqr 12/16/2013 14:29 ° instance creation ° 1 implementor ° 35 senders ° No real 
(non-optimized) Closures ° in no base system change set ? part of base system (i.e. 


| window | 
window e self new. 
window 
model: model; 
buildMorphicWindow. 
aString ifNotNil: [ window setLabel: aString ]. 
window openinWorld. 
twindow 


The SystemWindow class>>open: label: method sets the window's model, invokes buildMorphicWindow , 


sets the label (if any), and returns the window. 


So our next task is to go to the instance side of the class and implement 
IEDictWindow»»buildMorphicWindow . 
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buildMorphicWindow 
“Build and lay out the window and answer it." 


self layoutMorph 
beColumn; "the default" 
separation: self defaultSeparation; 
layoutSpec: LayoutSpec useAll; 
addMorph: self makeEntryArea; 
addMorph: self makeButtonArea; 
addMorph: self makeResultsArea; 
yourself 


. Which we will do in Part 3 of this tutorial 


e https://github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/SamplePackage3.md 


Making a Simple Package for Cuis -- Part 3 
This is a continuation of 
e https://github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/SamplePackage2.md 


Context 
To review: 
* We are about to put together a SystemWindow. 


* To do this we are writing the method IEDictWindow> >buildMorphicWindow 
* The Window should look something like 


We will use Layouts as described in the Layout Tutorial 

e https;//github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/LayoutTour.md 
buildMorphicWindow 
Looking at the desired result, | see a column of 


* Prompt and Text Entry 
* Buttons 
* List of Results 


So let's write this down. 
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buildMorphicWindow 
“Build and lay out the window and answer it." 


self layoutMorph 
beColumn; "the default" 
separation: self defaultSeparation; 
layoutSpec: LayoutSpec useAll; 
addMorph: self makeEntryArea; 
addMorph: self makeButtonArea; 


addMorph: self makeResultsArea; 
yourself 


Note that when | Accept this method, | get repeated warnings about undefined methods and options to change the 


text to known methods. 


| just select the top line of the menu (the original text) to confirm that this is the choice | want. 
OK. Let's define all those methods. 

makeEntryArea 

I'll start with the most complex one: makeEntryArea 


The LayoutMorph returned is a row with the prompt ('Enter text: ') and a OneLineEditorMorph where the user can 
type words to be matched. 


makeEntryArea 


"Answer a LayoutMoph containing the prompt and text entry area" 


| entryLayout entryHeigth | 


entryHeigth := self defaultSeparation * 2 + self textSizeUnit. 
entryLayout := LayoutMorph newRow. 
promptMorph := (StringMorph contents: 'Enter Text: ') 


emphasis: AbstractFont boldCode; 
yourself. 
promptMorph  layoutSpec: 
(LayoutSpec fixedWidth: (promptMorph measureContents x)). 


entryTextMorph := (OneLineEditorMorph contents: 'salute'). "initial text" 


entryTextMorph 
crAction: [self interlinguaContainsClick]; "Same action as IA-Contains 
button" 
layoutSpec: 
(LayoutSpec proportionalWidth: 0.9). 


^ entryLayout 
Separation: self defaultSeparation; 
layoutSpec: (LayoutSpec proportionalWidth: 1 fixedHeight: entryHeigth); 
addMorph: promptMorph; 
addMorph: entryTextMorph; 
padding: #left 


yourself 


The height of this LayoutMorph is calculated based on the text size. One can change the text size via World menu-- 
» Preferences--» Font Sizes. Don't worry about this for now. It takes some experimenting to get it right. More on this 


later.. 


We have to set up how the window fields change when resized. Part of this is by using LayoutSpec's. We actually 


measure the size of the promptMorph's string to set this here. 


We want the entryTextMorph to extend across the window and so we give it a proportional width of 0.9. This means 
to take up 9096 of the width of its layout. 


We also set the crAction for the morph. This code in invoked when the user types a carriage return / enter key. 


As | said above, we want the same action as when a user clicks on the 'Interlingua Contains' button. 

We want the prompt string to stick to the left of the layout, so we set the entryLayout's padding to #left . 
We will see how this works when we actually build and return a window. 

In the mean time, we need to Accept this code. 


Here is what the text above looks like when pasted in the code editor (just select the buildMorphicWindow text with 
Cmd-a and replace). 
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makeEntryArea 
"Answer a LayoutMoph containing the prompt and text entry area" 


| entryLayout entryHeigth | 
entryHeigth := self defaultSeparation * 2 + self textSizeUnit. 


entryLayout := LayoutMorph newRow. k 


promptMorph := (StringMorph contents: ‘Enter Text: ') 
emphasis: 1; 
yourself. 
promptMorph layoutSpec: 
(LayoutSpec proportionalWidth: 0.3; 
fixedWidth: (promptMorph measureContents x)). 


entryTextMorph := (OneLineEditorMorph contents: 'salute"). "initial text" 
entry TextMorph 
crAction: [self interlinguaContainsClick]; "Same action as IA-Contains button" 
layoutSpec: 


Boy, there is a lot of red here! Not to worry. The code browser will help us out. 


When | Cma-s (Accept), | find that | have some fixes to make. 
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makeEntryArea 
"Answer a LayoutMoph containing the prompt and text entry area" 


| entryLayout entryHeigth | 
entryHeigth := self defaultSeparation * 2 + self textSizeUnit. 


_entryLayout := LayoutMorph newRow. — 


fixedWidth: babe es AA measureContents x)). 


:= (OneLineEditorMorph contents: 'salute'). Bus text" 


5 | 
crAction: [self interlinguaContainsClick]; "Same action as 1A-Contains button" 
layoutSpec: 


| forgot to define promptMorph as an instance variable. 


No worries. | can select 'declare instance’ and the code is added to the class definition for me. Nice this! 
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makeEntryArea 
"Answer a LayoutMoph containing the prompt and text entry area" 


| entryLayout e 
entryHeigth := 


entryLayout := L! 


promptMorph 
e 


Yp 
promptMorph 
(LayoutSpe 


entry TextMorph Inr 

entry TextMorph T 
crAction: [se 
layoutSpec: 


Ah! The OneLineEditorMorph class is missing. 
This is a more serious problem. 
Time to bail out (cancel) and load the required code! 


What has happened is this. Cuis keeps a small kernel by moving optional code into packages. This means that the 
core is smaller and easier to understand. It also means that we can learn each package Feature incrementally as we 
need them. 


As Cuis gets simpler sometimes code we use and rely on gets moved somewhere else! That happened to me here. 
The OneLineEditorMorph was moved into a package in the Packages directory with a Feature name of +'Morphic- 


Widgets-Extras . 


You can do a text search to find such classes. In a Linux shell this would be grep OneLineEd --files-with- 


matches */*.st but each OS has some text search method. 
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makeEntryArea 
“Answer a LayoutMoph containing the prompt and text entry area" 


| entryLayout entryHeigth | 
entryHeigth := self defaultSeparation * 2 + self textSizeUnit. 


entryLayout := LayoutMorph newRow. 


Feature require: &'IA-EN-Dictionary'. 
IEDict englishStarts: ‘core’. 


^asureContents x)). 


ts: 'salute'). "initial text" 
entry TextMorph 
crAction: [self interlinguaContainsClick]; "Same action as IA-Contains button" 
layoutSpec: 


After loading the Morphic-Widgets-Extras feature, we can Accept the code. Note that the word 
OneLineEditorMorph turns from red to black to indicate it is a known class name. 


Also, you can use a FileList to open a Package Browser to view code in a package without loading it into your 
image. 


This sometimes helps me decide if a package has something | want. 
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clickAndHalf:localPosition: 
contents 
contents: 
event handling testing — |crAction 
events-processing ion: 


¡¡RectangleLikeMorph subclass: #OneLineEditorMorph 
instanceVariableNames: 'font emphasis contents editor showTextCursor 
pauseBlinking textCursorRect keyboardFocusWatcher crAction' 
classVariableNames: " 
poolDictionaries: " 
category: 'Morphic-Widgets-Extras' 


A plain text editor for Morphic. Handles only one line. Does not handle fonts/styles, 
alignment, Smalltalk utilities and any other advanced stuff in TextModelMorph. Just a 
simple text editor. 


Can optionally include a crAction: a zero argument closure, to be evaluated on Cr 
keystroke. 


When using something from another package, we say that other package is required for our package to work. The 


system does not know this. We need to open an Installed Packages browser and click on the 'add requirement 
button. 


Note that we only get to select from loaded packages. 


The Cuis-Base selection requires a particular version/revision of the base image. You can delete a previous 
requirement and select this again to get a new Cuis-Base revision requirement if you need the something provided in 
the latest Cuis release. 
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IA-EN-Dictionary L4. — 
- Morphic-Widgets-Extras 1.7 /home/kend/Cuis/Cuis-Smalltalk-Dev/Packages/Morphic-Widgets-Extra 


Package: IA-EN-Dictionary -- From Cuis 4.2 of 25 July 2013 [latest update: #2‘C CEL . October 2016 at 7:20:10 
pm -- Number of system categories 1. -- Number of classes: 2. Number of exiCuis-Base = 8 rof 
methods: 8. Total lines of code: 70 (8.75 per method). Morphic-Widgets-Extras 


Enter a word in English or Interlingua and find the corresponding Interlingua or English usage. 


In any case, after adding the Morphic-Widgets-Extras Feature Requirement, we need to save our package. 


Of course, after we do this it would be a good idea to do a "git commit" "git push" as well! (not shown) 
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Package: IA-EN-Dictionary -- From Cuis 4.2 of 25 July 2013 [latest update: #2950] on 12 October 2016 at 7:20:10 
pm -- Number of system categories 1. -- Number of classes: 2. Number of extension methods: 0. Total number of 
methods: 8. Total lines of code: 70 (8.75 per method). 


Enter a word in English or Interlingua and find the corresponding Interlingua or English usage. 


FeatureRequirement(Morphic-Widgets-Extras 1.7 to *.*) 


makeButtonArea 


The next layout we need to make is for the button area. 


The buttons should be the same size, so they can share a single LayoutSpec. 


makeButtonArea 


"Answer a LayoutMorph with our four buttons -- a column of two rows" 


| buttonHeight buttonLayout interlinguaButtonLayout englishButtonLayout 


buttonArea | 
buttonHeight := self textSizeUnit * 2. 
buttonLayout := LayoutSpec proportionalWidth: 0.3 fixedHeight: buttonHeight. 
interlinguaButtonLayout := LayoutMorph newRow. "a row of two buttons" 


interlinguaButtonLayout 
padding: #center; 
separation: 2; 
addMorph: 
(PluggableButtonMorph 
model: self 
action: #interlinguaContainsClick 
label: ‘Interlingua Contains') layoutSpec: buttonLayout; 
addMorph: 
(PluggableButtonMorph 
model: self 


action: #interlinguaStartsClick 


label: ‘Interlingua Starts') layoutSpec: buttonLayout. 
englishButtonLayout := LayoutMorph newRow. "a row of two buttons" 
englishButtonLayout 


padding: #center; 
separation: 2; 
addMorph: 
(PluggableButtonMorph 
model: self 
action: #englishContainsClick 
label: 'English Contains') layoutSpec: buttonLayout; 
addMorph: 
(PluggableButtonMorph 
model: self 


action: #englishStartsClick 


label: 'English Starts') layoutSpec: buttonLayout. 


buttonArea := LayoutMorph newColumn. 
^ buttonArea 
layoutSpec: (LayoutSpec proportionalWidth: 1; fixedHeight: 4 * self 
textSizeUnit) ; 
addMorph: interlinguaButtonLayout ; 
addMorph: englishButtonLayout ; 


yourself 


This is a somewhat long method which | can break up later if it bothers me. Right now, the code is simple enough to 
keep together. 


When a PluggableButtonMorph gets clicked on, it invokes the action on its model. In this case the IEDictWindow 
wants the event so that it can set the IEDict's searchString before asking for new results. 


We'll paste this code in and accept it. 
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makeButtonArea 
"Answer a LayoutMorph with our four buttons -- a column of two rows" 


| buttonHeight buttonLayout interlinguaButtonLayout englishButtonLayout buttonArea | 


buttonHeight :2 self textSizeUnit * 2. 
buttonLayout := LayoutSpec proportionalWidth: 0.3 fixedHeight: buttonHeight. 


interlinguaButtonLayout := LayoutMorph newRow. "a row of two buttons" 


interlinguaButtonLayout 
padding: #center; 
Separation: 2; 
addMorph: 
(PluggableButtonMorph 
model: self 
action: #interlinguaContainsClick 
label: 'Interlingua Contains') layoutSpec: buttonLayout; 
addMorph: 
(PluggableButtonMorph 


Now, before | forget, is a good time to add event methods for the button actions. 
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Tools-Code Differ 
Tools-Menus 


SystemWindow subclass: #IEDictWindow 
instanceVariableNames: 'entry TextMorph resulti 
classVariableNames: " 
poolDictionaries: " 
category: 'IA-EN-Dictionary' 


Feature n 7 ; 
IEDict en GUI for Interlingua <-> English lookup 


Feature 


IEDictWindow open 


interlinguaContainsClick 


self model searchString: self searchString; 


interlinguaStartsClick 


self model searchString: self searchString; 


englishContainsClick 


self model searchString: self searchString; 


englishStartsClick 


self model searchString: self searchString; 


buildMorphicWindow 
makeButtonArea 
makeEntryArea 


interlinguaContainsClick 


interlinguaStartsClick 


englishContainsClick 


englishStartsClick 


Each of these methods just set the model's searchString and tell the model to handle the event. 


makeResultsArea 


| need to re-select the 'GUI building’ method category and add makeResultsArea. 


makeResultsArea 


"Answer a LayoutMoph containing the results of the query" 


resultMorph := (PluggableListMorph 
model: model 
listGetter: #resultAsList 
indexGetter: #resultIndex 
indexSetter: #resultIndex: 
mainView: self 
menuGetter: nil 
keystrokeAction: nil). 
^ resultMorph 
layoutSpec: (LayoutSpec proportionalWidth: 1.0 proportionalHeight: 0.98); 
color: (Theme current textHighlight); 


yourself 


The resultMorph is a PluggableListMorph which takes up most of the window real estate. It asks the model (an IEDict 
instance) for resultAsList and gets and sets an index. 


This means that we have to add these three methods to IEDict. Let's wait a bit on this. 


You already pasted and accepted makeResultsArea method, right? 


IEDictWindow open 


So let's try opening a IEDictWindow! 


Many ways to do this. Since | already typed the text into the IEDictWindow class comment, | go there, select the text 
and (Cmd-d) Dolt. 
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Tools-Menus GUI building englishContainsClick 

A rv events englishStartsClick 
interlinguaContainsClick 
interlinguaStartsClick 


Class definition for IEDictWindow. 8 instance methods. 1 class methods. 99 total lines of code. 


SystemWindow subclass: #IEDictWindow 
instanceVariableNames: ‘entry TextMorph resultMorph promptMorph' 
classVariableNames: " 
poolDictionaries: " 
category: 'IA-EN-Dictionary' 


Feature A SEN : 
IEDict en GUI for Interlingua English lookup 


Feature 


¿gy + o essagenoti SE a: IEL 
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inc this e: C 
IEDictWindow(Object)>>doesNotUnderstand: #defaultSeparation 
IEDictWindow>>buildMorphicWindow 

IEDictWindow class(SystemWindow class)>>open:label: 
IEDictWindow class>>open 

IEDictWindow class>>Dolt 
Compiler>>evaluate:in:to:notifying:ifFail:logged: 

[] in SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 


SmalltalkEditor>>evaluateSelectionAndDo:ifFail: 
SmalltalkEditor>>dolt 

SmalltalkEditor>>dolt: 

sma 


Feature Gui for Interlingua <-> English lookup 
IEDict en 


Feature 


IEDictWindow open 


Ah, need to write defaultSeparation .Thinking back, | also need the textSizeUnit . 


These kinds of methods typically go in a method class geometry 


defaultSeparation 


"Answer the number of pixels between fields/layouts" 


^ 5 "pixels" 


textSizeUnit 


"Answer the scaling factor for sizing; note method #fontPreferenceChanged" 


^ AbstractFont default height 


OK. Try again and... 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev-spur.image 
"T sssageNoit SrStooQ:EDICC SSUltASLISt 
buildMorphicWindow 
defaultSeparation 
B IEDict(Object)»»doesNotUnderstand: #resultAsList englishContainsClick 
PluggableListMorph>>getList englishStartsClick 
PluggableListMorph>>updateList interlinguaContainsClick 
PluggableListMorph>>model:listGetter:indexGetter:indexSette 
PluggableListMorph class>>model:listGetter:indexGetter:index 
¡EDictWindow>>makeResultsArea 
IEDictWindow>>buildMorphicWindow 
IEDictWindow class(SystemWindow class)>>open:label: 
IEDictWindow class>>open k 


poolDictionaries: " 
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Feature [Gu] for Interlingua <-> English lookup 
IEDict en 


Feature 


. IEDictWindow open 


Ah! | have to add the access methods to IEDict. 
| guess it is time to do this now. 


Note that | don't have to define everything up front. It is OK to leave some holes to be filled and just let the system 
tell me when I try and use them. 


IEDict instance variables 


The first thing | need to do is add instance variables so that out IEDict model instance knows and keeps track of its 
searchString, searchResult, and resultIndex. 


| also need to add method class accessing and the methods to get and set the values for these. 


method category: accessing 


searchString 


^ 


searchString 


searchString: aRegularExpressionString 


searchString :- aRegularExpressionString 


Likewise for searchResult and resultIndex. 


method category: initialization 


initialize 


super initialize. 


searchString := 'salute'. 

searchResult := #() 

resultIndex  :- 0. 
method category: ui support 


OK. Here it gets interesting. 


Remember the four methods used by our buttons? 


They just make use of the search functions we already defined. 


interlinguaContainsClick 


self searchResult: (IEDict 


self resultIndex: 0. 


interlinguaStartsClick 


self searchResult: (IEDict 


self resultIndex: 0. 


englishContainsClick 


self searchResult: (IEDict 


self resultIndex: 0. 


englishStartsClick 


self searchResult: (IEDict 


self resultIndex: 0. 


interlinguaContains: 


interlinguaStarts: 


englishContains: 


englishStarts: 


(self searchString)). 


(self searchString)). 


(self searchString)). 


(self searchString)). 


Finally, we need to format our search results from an array of pairs to a string. 


resultAsList 


"Answer a list of form 


^ self searchResult collect: 


A Window! 


Try yet again and... 


"this <---> that' 


[ selt | 


(elt at: 


1) r ! 


10000 Interlingua <--> English 
T Enter Text: salute 


Interlingua Contains 


English Contains 


Feature n z ; 
IEDict en GUI for Interlingua «- English lookup 


Feature 


Yay!! 
Be sure to celebrate each success! 
Not bad looking, except for a bit of color. 


Let's click on a button and... 


Interlingua Starts 


English Starts 


s of code. 
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IEDictWindow(Object)>>doesNotUnderstand: #searchString 
IEDictWindow>>interlinguaContainsClick 
PluggableButtonMorph>>performAction 
PluggableButtonMorph>>mouseButton1Up:localPosition: 
PluggableButtonMorph(Morph)>>processMouseUp:localPositio 
MouseButtonEvent>>sentTo:localPosition: 
PluggableButtonMorph(Morph)>>handleFocusEvent: 
HandMorph>>startMouseDispatch: 
MouseButtonEvent(MouseEvent)>>startDispatchFrom: 


Feature Gui for Interlingua <-> English lookup 
IEDict en 


Feature 


Ah. We need accessing methods in IEDictWindow as well. 


entryTextMorph 
^entryTextMorph 


promptMorph 


^ 


promptMorph 


resultMorph 


^ 


resultMorph 


And importantly: 


searchString 


^ 


entryTextMorph contents asString 


Now we can click on the buttons without bringing up the debugger, but something is missing! The results! 
How do we fix this? 
We have to go back to the idea of separating a model from a view onto that model. 


The basic idea is that these are separated so that one can have multiple views of the same model. The model, to be 
separate, should not have to know anything about views. 


So how does a view know when to update its display of the model's information? 


The answer to that is events. 


When something changes in a model, it just announces an event. Any view (any object, really) can register as 
interested in an event. 


The model says "something happened, deal with it" without knowing who, if anyone, is listening. 
When is there an interesting event? 
In the case of IEDict, it is when a search takes place and a new result is obtained. 


So IEDict needs to announce an event when there is a new search result. 


searchResult: newResult 


searchResult := newResult. 

self triggerEvent: #newSearchResult 
And how to register that the IEDictWindow has an interest in events? 
Let's put this in the buildMorphicWindow method 


buildMorphicWindow 


"Build and lay out the window and answer it." 


self layoutMorph 
beColumn; "the default" 
Separation: self defaultSeparation; 
layoutSpec: LayoutSpec useAll; 
addMorph: self makeEntryArea; 
addMorph: self makeButtonArea; 
addMorph: self makeResultsArea. 


model when: #newSearchResult send: #searchResultsChanged to: self. 


model interlinguaContainsClick. "set initial text" 


^ self 


Now IEDictWindow needs a searchResultChanged method added to its events methods 


SearchResultsChanged 


"Display updated search results" 


resultMorph updateList 


OK. Let's click on some buttons!! 
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4| S of code. 


Wow!! The buttons work!! 
This could be good! 
In part 4 we will look at refinements: 


* Abit better color 


e Font resize when the font preference changes 


e Adding a selection to the Open menu. 


On to 


e https://github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/SamplePackage4.md 


Making a Simple Package for Cuis -- Part 4 


This is a continuation of 
e https://github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/SamplePackage3.md 


Add to the World->Open menu 


The next thing | am going to do is add a selection to the Open menu to open an IEDictWindow. 
There are several reasons for this. 


For one thing, when one has dictionaries or other useful browsers it is good to have them available where they can 
be found. 


Another reason is that | keep opening an IEDictWindow and | want to make this easy. (Did | tell you | was lazy?) 


Also, adding a menu item is easy. Just add a method to the class side of your browser class. In our case, 
IEDictWindow class. 


worldMenuForOpenGroup 


"Answer the information required to add me to the World menu-->Open.. submenu" 


“ Dictionary new 


at: #itemGroup 
put: 10; 

at: #itemOrder 
puts 20; 

at: #label 


put: 'IA<-->EN'; 


at: #object 
put: self; 


at: #selector 


put: #open; 


at: #balloonText 
put: 'Interlingua<-->English Lookup'; 


yourself. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev-spur.image 
x= + Y 


Tools-Code Differ ES all -- : 
Tools-Menus IEDictWindow [instance creation 


IA-EN-Dictionary 
Morphic-Widgets-Ex 


KenD 10/18/2016 07:54:48 ? world-menu ? 12 implementors ? 1 sender ? No real (non-optimized) Closures 
° in no base system change set ° in package IA-EN-Dictionary ° 


at: #itemGroup 
put: 10; 


at: #itemOrder 
put: 20; 


at: #label 
put: '|A<-->EN'; 


at: #object 
put: self; 


at: #selector 
put: #open; 


at: #balloonText 
put: 'Interlingua<-->English Lookup’; 
yourself. 
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at: #label 
put: '|A<-->EN'; 


at: #object 
put: self; 


at: #selector 
put: #open; 


at: #balloonText 
put: 'Interlingua<-->English Lookup’; 
yourself. 


Hey, do | like easy! 


You can hilight worldMenuForOpenGroup and Cmd-n (seNders) or Cmd-m (iMplementors) to see how menus get 
built. 


A bit of Color 


OK. Let's fix the color a bit. | want a different background color. 


l am going to write a method to return the background color so that | can try out a few different colors. 


For IEDictWindow | create a method category color and add the method 


backgroundColor 


A 


Theme current transcript muchLighter 


Then | set the window's background color in the instance side in method buildMorphicWindow. 


buildMorphicWindow 


"Build and lay out the window and answer it." 


self layoutMorph 
beColumn; "the default" 
separation: self defaultSeparation; 
layoutSpec: LayoutSpec useAll; 
addMorph: self makeEntryArea; 


addMorph: self makeButtonArea; 


addMorph: self makeResultsArea. 


model when: #newSearchResult send: #searchResultsChanged to: self. 


model interlinguaContainsClick. "set initial text" 
self color: self backgroundColor. 


^ self 


Now to open an new window from the Open menu and ... 
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at: label 
put: 'IA<-->EN'; 


at £object 
put: self; 


at £selector 
put: open; 


at: #balloonText 
put: 'Interlingua<-->English Lookup'; 
yourself. 


Nothing happened? Huh? 

This just goes to show that we need to flexible and nimble enough to deal with the unexpected. 
Let's look around a bit. 

| Cmd-click on the IEDictWindow morph and use its menu handle to open an Inspector on it. 


In the Workspace pane of the Inspector I type 


self color: self backgroundColor. 


Press Cmd-d (Dolt) and ... 


iayoutspec: Layoursnec ir 
addMorph: self malnterlingue 


addMorph: self makeButtonArea; 
addMorph: self makeResultsArea. 


model when: #newSearchResult send: #searchResultsChanged to: self. 
model interlinguaContainsClick. "set initial text" 


self color: self class backgroundColor. 


t self 
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all inst vars 
owner 
submorphs 
location 

| layoutNeedec 
layoutSpec 

| properties 

| extent 

| color 

| borderWidth 


| send: #searchResultsChanged to: self. 
E initial text" 


The background color for the window is set as | expect. 
So the color setting changed after it was setin buildMorphicWindow . 
Who is clobbering our color setting? 


How do we solve this mystery? 


Let's see who is messaging/calling buildMorphicWindow . 


Being lazy (did | tell you I was lazy?), | go back to the buildMorphicWindow method, select the name and Cmd-n 
(seNders of it). 
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da y the window and answer it." 


self layoutMorph 
beColumn; "the default" 
separation: self defaultSeparation; 
layoutSpec: LayoutSpec useAll; 
addMorph: self makeEntryArea; 
addMorph: self makeButtonArea; 
addMorph: self makeResultsArea. 


model when: #newSearchResult send: #searchResul 
model interlinguaContainsClick. "set initial text" : 


self color: self class backgroundColor. 


t self 


CodePackagel istWindow fontPreferenceChanged 
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open: model label: aString 


| window | 
window e self new. 


DI li Ww k 
aString ifNotNil: [ window setLabel: aString ]. 
window openinWorld. 
twindow 


self color: self class backgroundColor. 


t self 


| find that the SystemWindow class>>open:label: method 


e creates a new window 

* sets its model 

* invokes buildMorphicWindow 

e sets the window's label in the title bar 


* opensitin the current world 
Nothing wierd here. 


Let's look at implementors of openInWorld 
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open: mode! label: aString 


| window | 
window « self new. 
window 
model: model; 
buildMorphicWindow. 
aString ifNotNil: [ window setLabel: aString ]. 
window 6 
twindow 


self color: self class backgroundColor. 


t self 
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open: mode! labe 


| window | 
window « self 
window = 
model: modebpentInWorld 

buildMorphic] "Ensure all widgets have proper colors before opening" 
aString ifNotNi self widgetsColor: self windowColor. 

super openinWoWd. 

twindow Theme current windowOpen: self 


self color: self class backgroundColor. 


t self 


Ah hah! 
SystemWindow's openInWorld is overriding Morph's openInWorld to fiddle with window colors. 


We can override SystemWindow>>windowColor with our own color method 


windowColor 


"Use current theme" 


“Theme current transcript 


Note: you can hilight Theme , Cmd-b (Browse the class) to look at various color selections. Exploring a Color shows 


a small color swatch. For Color details, look at various sets of named colors and the Color Editor. 


e https://github.com/KenDickey/Cuis-Smalltalk-NamedColors 
e https://github.com/KenDickey/Cuis-Smalltalk-ColorEditor 


Open a new IEDictWindow and... 
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windowColor 
"Use current theme" 


tTheme current transcript 


Enter Text: salute 


This is starting to look pretty good. 


Now, rather than change the SystemWindow>>openInWorld method, | am going to set some color values after 


openInWorld has been invoked. 


We can do this in IEDictWindow class>>open 


IEDictWindow open. 


| newSelf | 

newSelf := self open: (IEDict new) label: 'Interlingua <--> English'. 
"Override default color resets in SystemWindow>>openInWorld" 

newSelf color: newSelf backgroundColor. 


newSelf layoutMorph submorphs last "the text entry layout morph" 


color: (Theme current textHighlight lighter). 


A 


newSelf 
Open an new IEDictWindow and... 
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newSelf := self open: (IEDict new) label: 'Interlingua <--> English’. 

“Override default color resets in SystemWindow»-openlnWorld" 

newSelf color: newSelf backgroundColor. 

newSelf layoutMorph submorphs last "the text entry layout morph" 
color: (Theme current textHighlight lighter). 

1 newSelf 


Super!! 


Now we know we can play with colors to get whatever we want want. 


Font Resize 


World menu-»Preferences-» Font Sizes lets one select a font size which works well with one's screen size and 
resolution -- or to set a large font for a demo or talk. 


If you play with these for a bit, you will see that most windows do pretty much the right thing. 
We want our IEDictWindow to do the right thing as well. 
This means that our basic window size should be scaled based on the current font. 


One way to do this is by changing the window size so that it looks right and asking it for it's unscaled size. 
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a EN 
(self morphExtent / self textSizeUnit) rounded. 430816. 


| did that here by Printlt (Cmd-p) on an Inspector opened on the IEDictWindow where | asked the question 


(self morphExtent / self textSizeUnit) rounded. 


This gets us the unscaled extent. Now We know enough to add a method to the geometry category 


initialExtent 


^ (30 @ 16) * self textSizeUnit 


When we select a font size and open an IEDictWindow, it scales itself to the font we use. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev-spur.image 


However, if we change the font now, the window does not look so good. 
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initialExtent 


1 G0 @ 16) * self textSizeUnit 


To fix this, we need to look at how fonts are updated when the font preference changes. 


In this case, | bring up a Message Names browser. (World menu-» Open-» Message Names) and type 'fontpref', hit 
return, and look at the SystemWindow method that deals with this. 


/home/kend/Cuis 


= 0 — —1 
CodePackageListWindow fontPreferenceC 
InnerListMorph fontPreferenceChanged 
InnerTextMorph fontPreferenceChanged 
LayoutMorph fontPreferenceChanged 
Morph fontPreferenceChanged 
OneLineEditorMorph fontPreferenceChange 
PluggableListMorph fontPreferenceChangec 


jmv 3/24/2016 23:25 ° geometry ° 8 implementors ° 8 senders ° No real 
(non-optimized) Closures ° in no base system change set ° part of base system (i.e. 


| also look at some of the other fontPreferenceChanged methods to see how they handle a font resize. 


Basically, Morphs which draw Strings know how to update their fonts. However, window Morphs do their own layouts 
and only the windows know how to update their layouts when things change. 


We can adjust to a new font size in our own fontPreferenceChanged event method. 


fontPreferenceChanged 


super fontPreferenceChanged. 
self promptMorph 
layoutSpec: (LayoutSpec 
proportionalWidth: 0.3; 
fixedWidth: 
(self promptMorph measureContents x)). 
self layoutMorph submorphs last "text entry layout" 
layoutSpec: (LayoutSpec 
proportionalWidth: 1 
fixedHeight: self defaultSeparation * 2 + self textSizeUnit). 


self morphExtent: (self morphExtent max: self initialExtent). 


Let's try again. Set the font preference to Small, open an IEDictWindow, set to Huge. 


al (non-optimized) 


(self promptMorph measureContents x)). 
self layoutMorph submorphs last "text entry layout" 
layoutSpec: (LayoutSpec 
proportionalWidth: 1 
fixedHeight: self defaultSeparation * 2 + self textSizeUnit). 


self morphExtent: (self morphExtent max: self initialExtent). 


Ah! Much better! Celebrate success! 

| did not update the button layouts when the font preference changed. Feel free to do so. (Did | tell you | was lazy?) 
Add documentation method whyMe 

| sometimes add a documentation method with the name whyMe to an important class which returns a string. 


Interlingua is a bit odd, so | add one here to the IEDict class. 


whyMe 


"Answer what you always wanted to know..." 


^'Interlingua is an auxiliary language made from common elements of 
the romance languages and English. The language has been in use since the 1950''s 


and is very readable. 
You can find out much more at http://www.interlingua.com 


The dictionary presented here is based on a 30,000 entry dictionary available 
from Paul Denisowski (paul@denisowski.org) at 


http://www.denisowski.org/Interlingua/Interlingua.html 
Interlingua Sample: 


Pro personas qui es familiar con le vocabulario panoccidental Interlingua es 
comprensibile a prime vista. Per un texto in Interlingua on pote attinger un 
grande publico multinational cultivate. Pro altere personas Interlingua 


offere un utile introduction al tresor de vocabulos scientific, technic e 


cultural. Illo anque facilita le lectura de linguas romanic. Interlingua pote 


esser un profitabile factor supplementari in studios linguistic. 


Le internationalitate del vocabulario e le simplicitate del grammatica 


possibilisa al lector o studiante tosto occupar le position de un active 


usator de Interlingua. 


Lingua natural 
e musical 
de parolas international 


e un grammatica phenomenal! 


Comprehensibile facilemente 
in le mundo per tote le gente: 


apprender lo es un acto intelligente! 


Le medio de comprehension 
pro le solution del confusion 


in le global communication! 
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Lingua natural 

e musical 

de parolas international 

e un grammatica phenomenal! 


Comprehensibile facilemente 
in le mundo per tote le gente: 
apprender lo es un acto intelligente! 


Le medio de comprehension 
pro le solution del confusion 
in le global communication! 

' 


k 


Check Our Work 


OK. Time to save our package, "git commit", "git push". 
Open a new image. 


Feature require: #'IA-EN-Dictionary'. 


And check our work. 


Did we remember to require all packages we depend on? 


Cuis4.2-2950-spur.image 


Ben obra!! 


Cuis Package Reference 


Also, do a search on GitHub for repositories containing 'Cuis-Smalltalk' . The packages are as follows: 


'Morphic-ColorEditor' 
e https;//github.com/Cuis-Smalltalk/Morphic/tree/master/ColorEditor 


description: 


'Color Editor/Picker' 


provides: #'Morphic-ColorEditor' 


requires: { #'Cuis-Base'. #'Morphic-Miscl'. 
#'Graphics-Files-Additional'. #'CSS3-NamedColors'. } 


Of Interest in 'Morphic-ColorEditor' 


e Adds custom Morphs to the Morphic Menu (World Menu -> New Morph..) 

* Making use of other packages (Requires Features CSS3-Colors and Morphic-Misc-1) 
e Shows Feature "autoload" in code (method #ColorPallet> >useCrayonColorDict) 

e Panel creation and usage 

e Drag 'n Drop (DropTarget) 

e Discussion of Color in Cuis (class comment in ColorPaneMorph) 

e Uses Radio Buttons & Slider 

e Shows model/view separation (#when:send:to:) 


e Adds menu items to World Menu 


'ClassCommentBrowser' 


e */Cuis-Smalltalk-Dev/Packages/ClassCommentBrowser.pck.st 


description: 


"Browse class comments for classes with names such as "Pluggable," "Morphic," 


"Text," or "Morph" which appear in a hierarchical list.' 
provides: #'ClassCommentBrowser' 


requires: {} 


Of Interest in 'ClassCommentBrowser' 
e Multipane browser with selection and search 
* Popup menu on selected class allows opening browsers 


* Class Comment Pane allows evaluation of Smalltalk expressions. 


‘Crypto-NaCl' 


e https://github.com/KenDickey/Cuis-Smalltalk-Crypto-NaCl 


description: 
‘Smalltalk interface to the NaCl (salt) crypto library' 
provides: #'Crypto-NaCl' 


requires: { #'FFI. } 


Of Interest in 'Crypto-NaCI' 
e Simple example of FFI (Foreign Function Interface) usage 
[] . . 1 
Interlingua-English-Lookup 
e https://github.com/Cuis-Smalltalk/CodeExamples/tree/master/IA-EN-Dictionary 


description: 
'Interlingua<->English Language Lookup' 
provides: #'Interlingua-English-Lookup' 


requires: { ] 


Of Interest in 'Interlingua-English-Lookup' 
e Shows how to set up a specialized SystemWindow using method #buildMorphicWindow. 
* Shows a useful application built with a small amount of code. 


* Note IEDictWindow> »fontPreferenceChanged updates sizes when font sizes change. 


'Morphic-Misc1' 


e https://github.com/Cuis-Smalltalk/Morphic/tree/master/Morphic-Misc1 


description: 
"Various basic morphs used by several packages' 
provides: #'Morphic-Miscl' 


requires: { } 


Of Interest in 'Morphic-Misc1' 


e AddedCursors - Shows how to create and use a custom cursor. 

e BorderedimageMorph - Morph with a custom #drawOn: method. 

e DropColorMorph - A "color swatch" with a custom #dropAction: which gathers color setters into a popup 
selector menu. 

e DropTargetMorph - Solves the problem of dropping state and behavior changes onto a specific Morph. One 
creates a DropTarget and drops Morph updaters on that. See how items are added to the Morph Menu via 
the method Morph> >addCustomMenultems: hand: in the '*morphit-misc1' method category. 

e EditPanel - My editModel is a "putty" or "shadow" copy to which all edit operations are applied. Subclassed 
by LayoutMorphEditPanel and LayoutSpecEditPanel. If the user Update's then the changes are propagated 
from the editModel to the model. 

e FrameMorph - Another morph with a custom drawOn: method. Method morphContainsPoint: is specialized 
so that mouse clicks are only noticed on the frame itself. 

e FramedLayoutMorph - Subclass of LayoutMorph which adds a frame. 

e |magePallet - Used to display a pallet of widgets to grab a copy of to drop on something else. Examples on 
the class side. 

e LabelMorph - A StringMorph used as a label. Has a few added convenience methods. 

e LayoutMorphEditPanel - Useful to edit Layouts. Selectable from a Morph's menu. 

e LayoutSpecEditPanel - Useful to edit LayoutSpecs. Selectable from a Morph's menu. 

e LineMorph - A line useful to show a connection between other Morphs. 

e PalletLayoutMorph - A LayoutMorph which allows grabbing (cloning) its submorphs. 

e Panel - A very simple window with a label. Useful when you don't need the full generality of a 
SystemWindow. 

* PluggableScrollBar - 

* RadioButtonMorph - 

* RadioGroup - 

e SignMorph - useful morph to "point to" non-morph objects 

e SimpleNumberEntryMorph - 

e WindowTitleMorph - Used in Panels to supply Title and common Buttons 


Adding Morphs to the New Morph menu 


When the browser category or a Morph starts with 'Morphic-' and the Morph's class answers true to 
#includelnNewMorphMenu, then the Morph will show up under the category name with the 'Morphic-' prefix 


removed. 


The New Morph Menu is available via World Menu -» New Morph.. 


To prevent such morphs from showing up in the New Morph Menu, add a class side method category 'new-morph 


participation’ and add a method #includelnNewMorphMenu which answers false. 


You may also wish to add a class method initializedInstance to return something special when a new Morph is 
created from the New Morph Menu. Look at the code in UpdatingStringMorph class» »initializedInstance for an 


example. 


... NamedColors' 


e 'XKCD-NamedColors' 

e 'NBSISCC-NamedColors' 
e 'CSS2-NamedColors' 

e 'CSS3-NamedColors' 

e 'Crayon-NamedColors' 


e  https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev/Packages/Features/NamedColors 


description: 
"Color Name Dictionaries from various Color "Standards"' 


provides: { #'XKCD-NamedColors'. #'NBSISCC-NamedColors'. 
#'CSS2-NamedColors!. #'CSS3-NamedColors'. #'Crayon-NamedColors''. } 


requires: { } 


Of Interest in '... -NamedColors' 
e Create custom color dictionaries 
e Make your color dictionary the system color dictionary 


* Note method Color>>doesNotUnderstand: which shows how new colors are created by name using the 


current color dictionary. 


L| L| 
Patterns 
* https;//github.com/Cuis-Smalltalk/CodeExamples 


description: 


'Useful Cuis code patterns, intended to help the programmer exploit some of the 


features of Cuis classes. These examples separate model from view and feature two 


Styles: coupled and decoupled. 


The coupled style employs the "dependency mechanism" and exposes the model to 
changes in the view and to views which were unanticipated. The primary methods of 


the dependency mechanism are #changed: and fupdate: 


The decoupled style employs the "observer pattern" which ensures that the model can 
remain unaffected by changes to the view or by additional views. The primary methods 
of the observer pattern are #triggerEvent: and #when:send:to: . This is the 


preferred style for Cuis, although both styles can be found in the base. 


Feature require: 'Patterns' 
provides: #'Patterns' 


requires: { } 


Of Interest in ‘Patterns’ 


e Extensive line comments explaining reason for the code 
* How to use PluggableListMorph 
e Multiple views on a single model 
* Model is independent of the views 
e Examples: 
o updating all views when one view changes 


o changing one view having no effect on other views 


e Use of #when:send:to: and #triggerEvent: for communication between view and model (Observer Pattern) 


e Contrasting Observer Pattern and Dependency Mechanism 


‘Ropes’ 


e https://github.com/Cuis-Smalltalk/EnhancedText/tree/master/Ropes 


description: 
"Ropes: functional, immutable strings! 
provides: #'Ropes' 


requires: { #'Compression'. } 


Of Interest in ‘Ropes’ 


e Thread-safe functional strings 


e RopeFileList, RopeTextEditor show how to subclass/specialize system tools 


e Shows a family of related data structures working to support a common abstraction. 


L| ° . I 
Solitaire 
* https://github.com/Cuis-Smalltalk/Games/tree/master/Solitaire 


description: 
'Freecell and Klondike Solitaire Card Games' 
provides: #'Morphic-Games-Solitaire' 


requires: { #'Graphics-Files-Additional' } 


Of Interest in 'Solitaire' 
e Shows the structure of a complex application with a number of classes. 
e Drag 'n Drop 
e Card Images 
e Undo 
* Memento Pattern: save/restore game play 
e FreeCell and Klondike games share behaviors implemented in their parent class: CardTableMorph 
e Rule based interactions, e.g. CardContainerMorph> >okToPickUp: aCard 


e Continuation Passing: Card Moves are animated asynchronously, passing in the 'next' action. See 


CardTableMorph> >slideto:nSteps:delay:next: 
e Dynamic DropShadows: See CardMorph> >setDropShadowMorph 


e CardTableMorph class initializes games and causes table setup for Klindike, FreeCell, your-solitaire-game- 
here. 


e FreeCell and Klondike register with the FileList to restore saved game files. 


‘Life’ 


e https://github.com/Cuis-Smalltalk/Games 


description: 


'The game of Life is an example of a cellular automaton. It was developed by Prof. 
John H. Conway at the University of Cambridge. Cells are displayed on a grid, 


analogous to graph paper, and live or die by the following rules: 


- a live cell surrounded by 2 or 3 other live cells will continue to live 
- a live cell surrounded by 0 or 1 other live cells will die of loneliness 
- a dead cell surrounded by exactly 3 live cells will come alive 

- a cell surrounded by 4 or more live cells will die of overcrowding 


References: 


Gardner, Martin, "Mathematical Games", Scientific American, October 1970, February 
1971 


"Some Facts of Life", Byte Magazine, December 1978' 


Feature require: 'Life' 


Of Interest in 'Life' 


e A view creating another view 

e Model is independent of the views 

* Example of changing one view having no effect on other views 

* Use of #when:send:to: and #triggerEvent: for communication between view and model (Observer Pattern) 
e Each cell of the grid is a morph 


* Need for popup menu signaled by grid morphs 


‘Construction’ 


e https://github.com/Cuis-Smalltalk/Games 


description: 

‘Simulates the Construction Game' 

Feature require: #Construction 

'World->Open...->File List->Cuis-Smalltalk/Games/Construction' 
'installPackage Construction.pck.st' 

provides: ( #'Construction-Model'. #'Construction-Graphics'. } 


requires: { #'Morphic-Widgets-Extras'. #'Game' } 


Of Interest in ‘Construction’ 


e Automatic and interactive board tours 


e No limits on equipment quantities 

* History of player's progress 

e Statistics 

* Optional views to assist decision making 

* Players automatically informed of doubled state 

e Computer is banker, auctioneer, and auditor 

* Auditing is continuous 

* Rules enforced consistently 

e Rudimentary animation of the die and movement of tokens 


"TrafficLight' 


e  https://github.com/Cuis-Smalltalk/CodeExamples 


description: 

‘Simulates a traffic light’ 

Feature require: #TrafficLight 

"World->Open...->File List->Cuis-Smalltalk/CodeExamples/TrafficLight' 
'installPackage TrafficLight.pck.st' 


provides: ( #'TrafficLight-Model'. #'TrafficLight-Views' } 


Of Interest in 'TrafficLight' 


* Compare use of Dependency Mechanism and Observer Pattern 
* When one light turns on the others turn off 
* Views independent of the model 


More packages to come... 


